<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>公寓详情</title>
<link href="__PUBLIC__/index/css/apt.css" type="text/css" rel="stylesheet">
<link href="__PUBLIC__/index/css/swiper-3.3.1.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="__PUBLIC__/index/js/jquery-1.8.1.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3MBx3mG3POj2CG1Pd5mhD6Lz"></script>
<script type="text/javascript" src="__PUBLIC__/index/js/swiper.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/index/js/apt.js"></script>

</head>
<body>
	<div class="bn">
		<ul>
			<volist name="bn" id="src"  key="$key" >
			<li><img src="{$src}"/></li>
			</volist>   
		</ul>
		<ol id="num">
			<volist name="bn" id="id"  key="$key" >
			<li db="{$key}"></li>
			</volist>   
		</ol>
	</div>
 	<div class="show">
 		<dl>
 			<dt>{$apt.name}</dt>
 			<dd>{$apt.content}</dd>
 			<dd class="dz">{$apt.dz}</dd>
 			<dd class="tel">{$apt.tel}</dd>
 			<dd class="email">{$apt.email}</dd>
 		</dl>	
 		<if condition="$apt.url neq null ">
 			<div class="vrurl">
 			<div class="vr"></div>
 			 <div class="link" link="{$apt.url}" style="line-height: 40px; color: #fff; font-size: 16px; display: none;">VR图</div>
 			</div>
 		</if>
 	</div>
 	<div class="lm hxzs">
 		<div class="title"><p class="xt" >房型</p><p class="xjt"></p></div>
 		<div class="mian">
 			<volist name="hx" id="hx"  key="$key" >
	 			<div class="hx_for">
	 				<img src="{$hx.src}" class="bigs"/>
	 				<div class="hx_info">
	 					<div class="hx_t"><p>{$hx.huxing}({$hx.mianji})</p></div>
	 					<div class="hx_m">{$hx.jiage}</div>
	 					<div class="hx_d">{$hx.pingjia}</div>
	 				</div>
	 			</div>	
 			</volist>   
 			
 		</div>
 	</div>
 	<div class="lm jtwz">
 		<div class="title"><p class="xt" >交通与位置</p><p class="xjt"></p></div>
 		<div class="mian">
 			<div class="jt_for">
 				<img src="{$mot}" class="big">
 				<p>{$apt.jtxl}</p>
 			</div>
 			
 		</div>
 	</div>
 	<div class="lm fw">
 		<div class="title"><p class="xt">服务项目</p><p class="xjt"></p></div>
 		<div class="mian">
 			
 			<div class="fw_for">
 				<ol>
 					<li class="con">基础服务</li>
 					<li>增值服务</li>
 				</ol>
 				<ul>
 					<li style="display: block;">
	 					<volist name="fw" id="fw" key="$key" >
		 					<if condition="$fw.type eq 0">
		 						<p 
		 							<foreach name="afw" item="vo">
		 							<if condition="$fw.id eq $vo">style="display: block;"</if>
		 							</foreach>
		 						>{$fw.name}</p>
		 					</if>
	 					</volist> 
 					</li> 
 					
 					
 					<li>
 						<volist name="fw1" id="fw1" key="$key" >
 							<if condition="$fw1.type eq 1">
 								<p  
 								<foreach name="afw1" item="vo1">
		 							<if condition="$fw1.id eq $vo1">style="display: block;"</if>
		 						</foreach>
 									>{$fw1.name}</p>
 							</if>
 						</volist>   
 					</li>
 					
 				</ul>
 			</div>
 			
 			
 		</div>
 	</div>
 	<div class="lm ybf">
 		<div class="title"><p class="xt">公寓照片</p><p class="xjt"></p></div>
 		<div class="mian">
 			<div class="yb_for">
 				<volist name="ps" id="ps"  key="$key" >
 				<img src="{$ps}" class="big"/>
 				</volist>   
 				
 			</div>
 			
 		</div>
 	</div>
 	<div class="lm hdmap">
 		<div class="title"><p class="xt">互动地图</p><p class="xjt"></p></div>
 		<div class="mian">
 			<div class="map_for" id="map_for" db="{$apt.map}">
 				
 				
 			</div>
 			
 		</div>
 	</div>
 	<div id="popdiv"></div>
 	
</body>
<script type="text/javascript">


	var map = new BMap.Map("map_for");  // 创建Map实例
	 // 初始化地图,用城市名设置地图中心点
	
	map.enableScrollWheelZoom(); //开启鼠标滚轮缩放
	var localSearch = new BMap.LocalSearch(map);
	searchByStationName();
	function searchByStationName(){
		
		var keyword=$('#map_for').attr('db');
	    localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);  
        var myIcon = new BMap.Icon("__PUBLIC__/admin/image/dtb.gif", new BMap.Size(85,85));//图标
        var point1 = new BMap.Point(poi.point.lng, poi.point.lat);
        var point2 = new BMap.Point(poi.point.lng-0.003, poi.point.lat+0.001);
        var marker = new BMap.Marker(point1,{icon:myIcon});  // 创建标注，为要查询的地方对应的经纬度
        map.addOverlay(marker);      

        map.centerAndZoom(point2, 17);

        marker.addEventListener("click", function () { this.openInfoWindow(infoWindow);});
    });
	localSearch.search(keyword);
	}
	$('.mian').hide();
	open();
	function open(){
	$('.xjt').click(function(){
		$(this).addClass("open").removeClass("xjt");
		$(this).parent().nextAll().show();	
		$(this).unbind()
		close();
	});
	
	$('.vr').click(function(){
		$(this).addClass("cvr").removeClass("vr");
		$(".vrurl").animate({width:"80px"});
		$(".link").show();
		$(this).unbind()
		close();
	});
	}
	function close(){
	$('.open').click(function(){
		$(this).addClass("xjt").removeClass("open");	
		$(this).parent().nextAll().hide();
		$(this).unbind()
		open();
	});
		
	$('.cvr').click(function(){
		$(this).addClass("vr").removeClass("cvr");
		$(".vrurl").animate({width:"40px"});
		$(".link").hide();
		$(this).unbind()
		open();
	});
	
	}


</script>
</html>








